<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
      body,
      html {
        height: 100%;
        margin: 0 auto;
        padding: 0;
      }

      #app {
        height: 100%;
      }

      .m-layout {
        height: 100%;
      }

      .m-layout .m-layout-header {
        height: 60px;
        line-height: 60px;
        background-color: lightseagreen;
        color: white;
      }

      .m-layout .m-layout-body {
        height: calc(100% - 100px);
        background-color: #ccc;
        color: #555;
      }

      .m-layout .m-layout-footer {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: blueviolet;
        color: white;
      }

      .page-layout-body {
        background-color: white;
        width: 1200px;
        height: 100%;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <m-layout>
        <div class="page-layout-body" slot="m-layout-body"></div>
      </m-layout>
    </div>

    <script>
      Vue.component("m-layout", {
        template: `
                      <div class="m-layout">
                          <div class="m-layout-header">
                              <slot name="m-layout-header">科达视频会议管理系统</slot>
                          </div>
                          <div class="m-layout-body"><slot name="m-layout-body">主体内容</slot></div>
                          <div class="m-layout-footer">
                              <slot name="m-layout-footer">技术支持:雪夜惊鸿</slot>
                          </div>
                      </div>
                          `
      });
      // 创建根实例
      new Vue({
        el: "#app"
      });
    </script>
  </body>
</html>
